<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Topic</title>
  <!-- <link rel="stylesheet" type="text/css" href="/lib/semantic-ui/semantic.min.css" /> -->
  <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
  <!-- <script src="/lib/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="/lib/semantic-ui/semantic.min.js"></script> -->
  <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.js"></script>
  <!-- <script src="/lib/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- <script src="/lib/axios.min.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script src="/js/components.js"></script>
</head>

<body>

  <div id="app">
    <my-header v-bind:userinfo='userinfo'></my-header>
    <div class="ui main container">
      <h1 class="ui header" style="color:transparent">UI</h1>

      <!-- viewClass开始 -->
      <template v-if='!loading'>
        <h1 class="ui header">目录</h1>
        <div class="ui cards">
          <div v-for="item in list2" class="card">
            <div class="content">
              <div class="header"> {{item.class_name}}</div>
              <div class="meta">{{item.tot_topic}}个作业</div>
              <div v-if="item.lastest_topic_id!=null" class="description">最新
                <a :href="'/topic/'+item.lastest_topic_id">{{item.lastest_topic_title}}</a>
              </div>
              <div v-if="item.lastest_topic_id==null" class="description">无最新作业
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- viewClass结束 -->


      <view-loader v-if='loading'></view-loader>


      <!-- viewdata开始 -->
      <template v-if='!loading'>

        <h1 class="ui header">所有作业</h1>
        <div class="ui fluid action input">
          <input type="text" placeholder="Search..." />
          <div class="ui primary button">搜索</div>
        </div>
        <br/>
        <table class="ui  striped table">
          <thead>
            <tr>
              <th class="two wide">作业编号</th>
              <th class="ten wide">标题</th>
              <th class="two wide">状态</th>
              <th class="two wide">创建者</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list">
              <td> {{ item.id }} </td>
              <td>
                <a :href="'/topic/'+item.id">{{ item.title }}</a>
              </td>
              <td v-if="item.topicStatus==1">
                <i class="icon checkmark"></i> 进行中</td>
              <td v-if="item.topicStatus==0">
                <i class="icon close"></i> 已关闭</td>
              <td v-if="item.topicStatus==-1">
                <i class="icon clock"></i> 未开始</td>
              <td>{{item.creator}}</td>
            </tr>
          </tbody>
        </table>

        <!-- <my-pager></my-pager> -->
      </template>
      <!-- viewdata结束 -->

    </div>

    <auth-modal v-bind:errorinfo='errorinfo'></auth-modal>
    <my-footer></my-footer>
  </div>





  <script>

    var ld = {
      list: [],
      list2: [],
      userinfo: {},
      errorinfo: {
        type: 0,
        msg: ''
      },
      loading: true
    };


    axios.get('/api/u/info', {
      headers: { 'Access-Token': window.localStorage.getItem('token') }
    })
      .then(function (response) {
        ld.userinfo = response.data.data
      })
      .catch(function (error) {
        if (/50\d/.test(error.response.status)) {
          ld.errorinfo.type = 500;
        } else {
          ld.errorinfo.type = 400;
          ld.errorinfo.msg = error.response.data.msg;
        }
        $('.ui.basic.modal').modal('show');
        $(":root").delay(3000).queue(function () {
          $('.ui.basic.modal').modal('hide');
          window.location.href = "/login";
        });
      })

    axios.get('/api/t', {
      headers: { 'Access-Token': window.localStorage.getItem("token") }
    })
      .then(function (response) {
        ld.list = response.data.data;
        ld.loading = false;
      })
      .catch(function (error) {
        console.log(error);
        ld.loading = false;
      });



    axios.get('/api/c', {
      headers: { 'Access-Token': window.localStorage.getItem("token") }
    })
      .then(function (response) {
        ld.list2 = response.data.data;
      })
      .catch(function (error) {
      });


    var vm = new Vue({
      el: '#app',
      data: ld
    })

  </script>

</body>

</html>